<template>
    <div id="addFill">
        <div class="jx-content">
            <h3>能力的权重配置</h3>
            <div class="weight">
                <div class="fl">
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-form-item label="实验权重 :">
                            <el-select v-model="form.region1" @change='chang1()'>
                               <el-option label="10%" value="10"></el-option>
                                <el-option label="20%" value="20"></el-option>
                                <el-option label="30%" value="30"></el-option>
                                <el-option label="40%" value="40"></el-option>
                                <el-option label="50%" value="50"></el-option>
                                <el-option label="60%" value="60"></el-option>
                                <el-option label="70%" value="70"></el-option>
                                <el-option label="80%" value="80"></el-option>
                                <el-option label="90%" value="90"></el-option>
                                <el-option label="100%" value="100"></el-option>
                            </el-select>
                            </el-form-item>
                        <el-form-item label="随堂练习权重 :">
                            <el-select v-model="form.region2"  @change='chang2()' >
                                <el-option label="10%" value="10"></el-option>
                                <el-option label="20%" value="20"></el-option>
                                <el-option label="30%" value="30"></el-option>
                                <el-option label="40%" value="40"></el-option>
                                <el-option label="50%" value="50"></el-option>
                                <el-option label="60%" value="60"></el-option>
                                <el-option label="70%" value="70"></el-option>
                                <el-option label="80%" value="80"></el-option>
                                <el-option label="90%" value="90"></el-option>
                                <el-option label="100%" value="100"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="考试权重 :">
                            <el-select v-model="form.region3" @change='chang3()' >
                            <el-option label="10%" value="10"></el-option>
                                <el-option label="20%" value="20"></el-option>
                                <el-option label="30%" value="30"></el-option>
                                <el-option label="40%" value="40"></el-option>
                                <el-option label="50%" value="50"></el-option>
                                <el-option label="60%" value="60"></el-option>
                                <el-option label="70%" value="70"></el-option>
                                <el-option label="80%" value="80"></el-option>
                                <el-option label="90%" value="90"></el-option>
                                <el-option label="100%" value="100"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提问权重 :">
                            <el-select v-model="form.region4" @change='chang4()' >
                                <el-option label="10%" value="10"></el-option>
                                <el-option label="20%" value="20"></el-option>
                                <el-option label="30%" value="30"></el-option>
                                <el-option label="40%" value="40"></el-option>
                                <el-option label="50%" value="50"></el-option>
                                <el-option label="60%" value="60"></el-option>
                                <el-option label="70%" value="70"></el-option>
                                <el-option label="80%" value="80"></el-option>
                                <el-option label="90%" value="90"></el-option>
                                <el-option label="100%" value="100"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="fl weight-echarts ">
                    <div style="width: 100%;height:300px;" id="teacs">  </div>
                </div>
            </div>
         <div class="center"><button class="button-style"  @click='submit' >提 交</button>  </div>
     </div> 
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data () {
            return {
                 form:{
                    region1:'20',
                    region2:'30',
                    region3:'40',
                    region4:'10',
                },
                das:[],
            }
        },
         computed: {
            num(){
                 return 100-(Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+ Number(this.form.region4))   
            },
        },
         watch: {
            form:{
               handler(val, oldVal){
                   this.drawShape()    
               },
               deep:true,
             },
          },
         mounted () {
            this.drawShape()     
        },
         methods: {
            //提交
            submit(){
                if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))<100){
                    this.$message({
                        message: '存在未分配权重，请再次分配。',
                        type: 'warning'
                    });
                    return
                } else{
                    alert('提交成功')
                }
            },
            chang1(){
                let self=this
                if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))>100){
                    this.form.region1=''
                    this.$message({
                        message: '内容超出范围，请重新分配',
                        type: 'warning'
                    });
                    } 
                },
                chang2(){
                if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))>100){
                    this.form.region2=''
                        this.$message({
                        message: '内容超出范围，请重新分配',
                        type: 'warning'
                    });
                    } 
                },
                chang3(){
                if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))>100){
                    this.form.region3=''
                        this.$message({
                        message: '内容超出范围，请重新分配',
                        type: 'warning'
                    });
                    } 
                },
                chang4(){
                if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))>100){
                    this.form.region4=''
                        this.$message({
                        message: '内容超出范围，请重新分配',
                        type: 'warning'
                    });
                    } 
                },
            drawShape(){
                let self = this
                self.das=[
                    {value: self.form.region1, name:'实验权重', itemStyle:{normal:{color:'#4082fd'}}},
                    {value:self.form.region2, name:'随堂练习权重', itemStyle:{normal:{color:'#70ebfb'}}},
                    {value:self.form.region3, name:'考试权重', itemStyle:{normal:{color:'#33bef7'}}},
                    {value:self.form.region4, name:'提问权重',itemStyle:{normal:{color:'#f60'}}},
                    ]
                    if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))==100){
                        console.log(100)
                    }else if((Number(this.form.region1)+ Number(this.form.region2 )+ Number(this.form.region3)+Number(this.form.region4))<100 
                    || (Number(this.form.region1)+ Number(this.form.region2 ))<100
                    || (Number(this.form.region1)+ Number(this.form.region3 ))<100
                    || (Number(this.form.region1)+ Number(this.form.region4 ))<100
                    || (Number(this.form.region2)+ Number(this.form.region4 ))<100
                    || (Number(this.form.region3)+ Number(this.form.region4 ))<100
                    || (Number(this.form.region3)+ Number(this.form.region2 ))<100){
                        console.log(20)
                        self.das.unshift({value:self.num, name:'未分配' , itemStyle:{normal:{color:'#e5e5e5'}}}) //追加
                    }else {
                    console.log(10)
                    this.$message({
                        message: '内容超出范围，请重新选择',
                        type: 'warning'
                    });
                        return
                    
                    }
                self.chartColumn = echarts.init(document.getElementById('teacs'));
                var options = {
                // legend: {
                //         orient: 'vertical',
                //         left: 'left',
                //         data: ['实验权重','作业权重','考试权重']
                //     },
                series : [
                    { 
                        type: 'pie',
                       
                        radius : '55%',
                        center: ['50%', '40%'],
                        radius: ['35%', '60%'], 
                        data: self.das

                    },
                      
                ]
             };
             this.chartColumn.setOption(options)  

            }
        },
       
    }
</script>

<style scoped lang="scss">
@import "./../../../styles/layout/color_variables";
#addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .weight{
        padding: 80px 80px 50px 80px; 
        overflow: hidden;
    }
    .weight-echarts {
       margin-left: 100px;
       width: 500px;;
    }
    .center{
        text-align: center;
    }
}
</style>